iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 10
0
Mobile Development

諸神黃昏下的 iOS 工程師系列 第 10

D10 - 神說:「要有 Picker」,就有了 Picker

  • 分享至 

  • xImage
  •  

讓我們來實做一些快捷選單的功能吧!

? 隕石小故事

某次隕石開發時期,被要求實現 Web 上下拉式選單的功能,當時還真沒想過怎麼要在 APP 上實現這個效果,後來還好我們的設計師夠 Carry 幫我們阻擋了這次需求(讚嘆設計師 ??‍♂️)。後來採用折衷的方法,使用一個彈出式的 Picker 來處理這個需求。

Overview

常常我們在開發中會碰到一些選單的需求,希望在 App 中有一個能夠隨處開啟選單的功能,無論是彈出式選單或是側邊選單之類的需求,而這次教學就來分享一下如何在 iOS 實現彈出式 Picker 的做法吧。


實作

|Picker 畫面

首先,我們先建立一個 PickerViewController 的 Xib,並且簡單設計一下 UI:

這邊也需要設定 PickerView 的 dataSource 和 delegate,這邊我們會建立一個類型為 [String]dataSource 用來顯示 Picker 內容,以及類型為 IntselectedIndex 用來記錄目前選到的 index 值:


|Picker 動畫

接著我們在 ViewControllerpresent 這個 PickerViewController 看看。別忘了設置其 .modalPresentationStyle.modalTransitionStyle

這邊因為 Xcode 升級到 11,某些 modalPresentationStyle 效果會不太一樣,所以這邊我們改為 overFullScreen

讓我們來看一下目前效果:

接著我們希望它有向上向下的動畫效果,因此我們簡單創建一個動畫的函數,在 hidetrue 時,位移 contentView,反之,則回到原有的位置:

接著我們在某些 Life cycle 中調用這些動畫效果:

讓我們再次看看效果:


|獲取 Picker 的選擇:

讓我們新增一個 protocol 之後用來回傳我們選擇的 String。並且在 PickerViewController 中宣告一個 delegate

接著讓我們在 ViewController 設定好 pickerVC.delegate = self,接著把我們 delegate 所回傳的 string 顯示在 label 上:

接著讓我們看一下效果:


|設置 Picker 的 dataSource

這邊為了更靈活地顯示 Picker 中的內容,我們可以在 present 之前傳值給 PickerViewController。首先,我們先清空 PickerViewControllerdataSourceselectedIndex

接著判斷在我們 selectedIndex 有值的時候,將 pickerView 滾動至該項目上:

並且把 PickerViewControllerDelegatereceive 方法的參數改為 index 類型為 Int

別忘了修改其他調用 delegate.receive 地方:

接著回到我們的 ViewController 設置一個 [String]Int,其作用與我們 PickerViewController 原有的值相同:

接著讓我們新增一個 showPickerVC 的方法,其中可以透過 dataSourcecurrentIndex 兩個參數來傳值,並且在之前的 IBAction 中調用:

最後修改一下 PickerViewControllerDelegatereceive 的方法:

讓我們看看成果吧:

大功告成啦 ?


Summary

那我們這次彈出式 Picker 教學就到這邊結束啦,你可以在 contentView 中更換任何內容來達成其他種類的選單效果,而我們這個 PickerView 也能夠傳遞參數來更改顯示的內容,你也可以將這個顯示 PickerView 的方法 extensionViewController 中,如此一來就能夠在任何 viewController 中顯示這個 PickerView 了。

如果有更好的做法,也歡迎與我交流、分享 ??‍♂️


上一篇
D9 - 凍住!不許走!封印使用者的 Loading 畫面
下一篇
D11 - 爭什麼?摻在一起做成 StackView 啊~笨蛋
系列文
諸神黃昏下的 iOS 工程師31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言